<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'
import {useRouter} from 'vue-router'
import * as echarts from 'echarts';

// 查询
const userInfo = ref(JSON.parse(localStorage.getItem('ZAYY_USER_INFO')));
const password = ref("");
const isShowDialog = ref(false);
const dictList = ref([]);
const router = useRouter();
const headers = [
    {title: '医院名称', key: 'hospitalCode', sortable: false},
    {title: '标签', key: 'description', sortable: false, align: 'center'},
    {title: '人名', key: 'name', sortable: false, align: 'center'}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const hospitalList = ref([]);
const hospitalDataList = ref([]);

const imgBaseUrl = ref("http://10.10.10.49:9991/healthCommission/images/");
onMounted(() => {
    axios.post('/basBlack/selectPage', {
        pageNo: 1,
        pageSize: 7,
        name: "",
        hospitalCode: "",
        sex: "",
        idCard: "",
        mobile: "",
        isRead: ""
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
    axios.post("/basHosptial/selectList",{}).then(res => {
        hospitalList.value = res.data.data
    })

    axios.post("/basBlack/getHospitalCountInfo", {}).then(res => {
        getPieChart(res.data.data)
    })

    axios.post("/basBlack/getHospitalCountInfo", {}).then(res => {
        hospitalDataList.value = res.data.data
        hospitalDataList.value.forEach(item => {
            hospitalList.value.forEach(k => {
                if(k.code == item.hospitalCode) {
                    item.name = k.name
                }
            })
        })
    })

    axios.post("/sysDictData/selectList", {dictType: "black_type"}).then(res => {
        dictList.value = res.data.data
    })
});

function goUser() {
    router.push("/users")
}

function goHealth() {
    let url = 'http://101.68.222.195:9528/#/'
    // location.href = url
    window.open(url)
}

function getPieChart(val) {
    let data = []
    val.forEach(item => {
        hospitalList.value.forEach(k => {
            if(k.code == item.hospitalCode) {
                item.name = k.name
            }
        })
    })
    val.forEach(item => {
        data.push({
            name: item.name,
            value: item.count
        })
    })
    var chartDom = document.getElementById('pieChart');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 10,
            formatter: (name) => {
            let sum = 0
            let text = ''
            data.forEach(item => {
                sum += item.value
            })
            data.forEach(item => {
                if(item.name == name) {
                text += `${name}${(item.value/sum * 100).toFixed()}%  ${item.value}个`
                }
            })
            return text
            }
        },
        series: [
            {
            name: '现有个数',
            type: 'pie',
            radius: ['30%', '80%'],
            center: ["30%", "45%"],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 1,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: 10,
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: data
            }
        ]
        };
    option && myChart.setOption(option);
}

function clickEdit() {
    isShowDialog.value = true;
    password.value = "";
}

function savePassword() {
    let obj = {
        id: userInfo.value.id,
        password: password.value
    }
    axios({
        method: 'POST',
        url: '/user/updateUser',
        data: obj
    }).then(() => {
        snackbar.info('编辑成功');
        localStorage.removeItem('token');
        router.push("/login");
        isShowDialog.value = false;
    })
}

</script>

<template>
    <h1 class="title">首页</h1>
    <div class="flex-container">
        <div class="block-all">
            <div class="block" v-for="item in hospitalDataList">
                <div class="block-top">
                    <v-icon
                    icon="mdi-bookmark-minus"
                    size="x-large"
                    :color="'white'"
                    ></v-icon>
                    <span class="top-title">{{ item.name }}</span>
                </div>
                <div class="block-item">
                    <div class="item">
                        <div class="num">{{ item.count }}</div>
                        <div class="desc">现有个数</div>
                    </div>
                    <div class="item">
                        <div class="num">{{ item.nearlyCount }}</div>
                        <div class="desc">最近30天</div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    <div class="flex-main">
        <div class="left-content">
            <div class="main-content">
                <div class="main-title">医院统计</div>
                <div id="pieChart"></div>
            </div>
            <div class="main-content">
                <div class="main-title">快捷访问</div>
                <div class="url-list">
                    <div class="url" @click="goHealth">
                        <v-icon
                        icon="mdi-newspaper-variant"
                        size="35"
                        color="#ffffff"
                        ></v-icon>
                        <span>驾驶舱</span>
                    </div>
                    <div class="url" @click="goUser">
                        <v-icon
                        icon="mdi-account-multiple"
                        size="35"
                        color="#ffffff"
                        ></v-icon>
                        <span>特殊人员库</span>
                    </div>
                    <div class="url" @click="clickEdit">
                        <v-icon
                        icon="mdi-account-check"
                        size="35"
                        color="#ffffff"
                        ></v-icon>
                        <span>修改密码</span>
                    </div>
                    <div class="url">
                        <v-icon
                        icon="mdi-plus-circle-outline"
                        size="35"
                        color="#767676"
                        ></v-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-content center-content">
            <div class="main-title">日常消息</div>
            <div class="info" v-for="item in items">
                <div class="ash">
                    <v-icon
                    icon="mdi-newspaper-variant"
                    size="42"
                    color="#407BF1"
                    ></v-icon>
                </div>
                <div class="main">
                    <h1 v-for="k in hospitalList" v-show="k.code == item.hospitalCode">{{ k.name }}</h1>
                    <span v-for="k in dictList" v-show="k.dictValue == item.description">标签：{{ k.dictLabel }}</span>
                </div>
                <div class="right">
                    <h1>{{ item.createTime }}</h1>
                    <span>人名：{{ item.name }}</span>
                </div>
            </div>
        </div>
        <div class="main-content right-content">
            <div class="main-title">特殊人员库</div>
            <v-data-table-server
            :items-per-page="7"
            :headers="headers"
            :items-length="totalItems"
            :items="items"
            :loading="loading"
            class="elevation-1"
            hide-default-footer
            items-per-page-text="每页数量">
                <template v-slot:item.hospitalCode="{ item }">
                    <span v-for="k in hospitalList" v-show="k.code == item.raw.hospitalCode">{{ k.name }}</span>
                </template>
                <template v-slot:item.description="{ item }">
                    <span v-for="k in dictList" v-show="k.dictValue == item.raw.description">{{ k.dictLabel }}</span>
                </template>
            </v-data-table-server>
            <div class="btn" @click="goUser">查看更多</div>
        </div>
    </div>

    <v-dialog v-model="isShowDialog" max-width="500px">
        <v-card>
            <v-card-title>修改密码</v-card-title>
            <v-card-text>
                <v-text-field
                v-model="password"
                label="请输入新密码"
                ></v-text-field>
            </v-card-text>
            <v-card-actions>
                <v-btn color="primary" varint="text" @click="isShowDialog = false">关闭</v-btn>
                <v-btn color="primary" varint="text" @click="savePassword">确定</v-btn>
            </v-card-actions>
        </v-card>        
    </v-dialog>
</template>

<style scoped lang="scss">
.title {
    color: #9e9e9e;
    font-size: 25px;
    margin: 28px 0 0 26px;
    font-weight: 500;
}
.flex-container {
    .block-all {
        display: flex;
    }
    display: flex;
    overflow-x: scroll;
    width: 1635px;
    margin-top: 42px;
    margin-left: 11px;
    .block {
        width: 387px;
        height: 209px;
        background-color: #3285ff;
        border-radius: 10px;
        margin-right: 30px;
        .block-top {
            display: flex;
            margin-top: 17px;
            margin-left: 32px;
            .top-title {
                font-size: 25px;
                color: #ffffff;
                text-align: left;
                font-weight: 500;
                padding-left: 14px;
                line-height: 30px;
            }
        }
        .block-item {
            display: flex;
            justify-content: space-between;
            margin-left: 47px;
            margin-right: 70px;
            margin-top: 40px;
            text-align: center;
            .item {
                .num {
                    font-size: 40px;
                    color: #ffffff;
                    font-weight: 500;
                    line-height: 40px;
                    margin-bottom: 25px;
                }
                .desc {
                    font-size: 15px;
                    color: #ffffff;
                    font-weight: 300;
                }
            }
        }
    }
    .block:nth-child(2) {
        background-color: #14C6E0;
        margin-right: 23px;
    }
    .block:nth-child(3) {
        background-color: #57AFD7;
        margin-right: 23px;
    }
    .block:nth-child(4) {
        background-color: #03C5FF;
        margin-right: 23px;
    }
}
.flex-main {
    display: flex;
    margin-left: 11px;
    margin-top: 51px;
    height: 470px;
    .main-content {
        border-radius: 8px;
        box-shadow: 0px 10 16px -4px #E9EBF6;
        border: 1px solid rgba(192,210,226,0.3368);
        background-color: #ffffff;
        .main-title {
            width: 100%;
            height: 50px;
            background: linear-gradient( 180deg, #F7FBFF 0%, #F2F7FF 100%);
            box-shadow: inset 0px 1 0px 0px rgba(255,255,255,0.5954);
            border-radius: 8px 8px 0 0;
            color: #5b6388;
            font-weight: 600;
            font-size: 16px;
            line-height: 50px;
            padding-left: 32px;
        }
    }
    .left-content {
        width: 450px;
        margin-right: 50px;
        .main-content:nth-child(1) {
            height: 235px;
            margin-bottom: 31px;
            #pieChart {
                width: 405px;
                height: 200px;
                margin-left: 20px;
                margin-top: 5px;
            }
        }
        .main-content:nth-child(2) {
            height: 211px;
            .url-list {
                display: flex;
                margin-top: 35px;
                margin-left: 33px;
                .url {
                    margin-right: 40px;
                    width: 71px;
                    height: 71px;
                    background: #49B9FF;
                    box-shadow: 0px 2 5px 0px rgba(0,0,0,0.3);
                    border-radius: 13px 13px 13px 13px;
                    color: #5b6388;
                    color: 15px;
                    text-align: center;
                    font-weight: 500;
                    white-space: nowrap;
                    letter-spacing: -1px;
                    cursor: pointer;
                    position: relative;
                    padding-top: 19px;
                    span {
                        display: block;
                        margin-top: 32px;
                    }
                }
                .url:nth-child(2) {
                    background: #FFE749;
                }
                .url:nth-child(3) {
                    background: #FF8249;
                    margin-right: 28px;
                }
                .url:nth-child(4) {
                    margin: 0;
                    background-color: #ffffff;
                    border: 1px dotted #BDBDBD;
                }
            }
        }
    }
    .center-content { 
        width: 643px;
        margin-right: 54px;
        overflow-y: auto;
        .info {
            height: 46px;
            margin-top: 16px;
            margin-left: 49px;
            margin-right: 50px;
            display: flex;
            .ash {
                width: 42px;
                height: 46px;
                background-color: #ededed;
                border-radius: 5px;
            }
            .main {
                margin-left: 14px;
                h1 {
                    margin: 0;
                    padding: 0;
                    color: #5b6388;
                    font-size: 14px;
                    font-weight: 600;
                }
                span {
                    color: #D3D3D3;
                    font-size: 12px;
                    font-weight: 400;
                }
            }
            .right {
                flex: 1;
                text-align: right;
                h1 {
                    margin: 0;
                    padding: 0;
                    color: #ADABAB;
                    font-size: 12px;
                    font-weight: 400;
                }
                span {
                    color: #D3D3D3;
                    font-size: 12px;
                    font-weight: 400;
                }
            }
        }
    }
    .right-content {
        width: 427px;
        position: relative;
        .btn {
            width: 112px;
            height: 33px;
            border-radius: 17px;
            border: 1px solid #3f74f9;
            color: #3f74f9;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            line-height: 33px;
            position: absolute;
            left: 158px;
            bottom: 37px;
            cursor: pointer;
        }
        :deep(.v-data-table-footer) {
            display: none;
        }
        :deep(.v-data-table__tr:nth-child(odd) .v-data-table__td) {
            background-color: rgba(249, 251, 255, 0.80);
        }
        :deep(.v-data-table__tr .v-data-table__td) {
            border-right: 0.5px solid #D5E1F0;
            border-bottom: none;
            border-top: none;
            height: 40px;
            color: #5B6388;
            font-size: 14px;
        }
        :deep(.v-data-table__thead .v-data-table__td) {
            border-right: 0.5px solid #D5E1F0;
            border-bottom: none;
            border-top: none;
            height: 40px;
            color: #5B6388;
            font-size: 14px;
        }
        .elevation-1 {
            box-shadow: none !important;
            border-top: 1px solid #D5E1F0;
            border-bottom: 1px solid #D5E1F0;
        }
    }
}
::-webkit-scrollbar-track-piece {
  background-color: #f8f8f800;
}
::-webkit-scrollbar {
  width: 6px;
  transition: all 2s;
}
::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
::-webkit-scrollbar-corner {
  background-color: rgba(255, 255, 255, 0);
}
</style>
